.heats {
    background-color: #fff;
    padding: 0 2rem;
    .timechooser {
        line-height: 102px;
        .kuma-calendar-picker-input{
            width: 248px;
            font-size: 24px;
            line-height: 2em;
            input{
                font-size: 14px;
                height: 47px;
            }
        }
    }
    .playing {
        display: inline-block;
        vertical-align: middle;
        margin-left: 51px;
        width: 36px;
        height: 36px;
        border-radius: 100%;
        border: 2px solid #2599f2;
        transition: all .5s;
        &:hover {
            cursor: pointer;
            background-color: #2599f2;
            &:before {
                border-color: #fff!important;
            }
            &:after {
                border-color: #fff!important;
            }
        }
        &.off {
            position: relative;
            &:before {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-30%, -50%);
                display: inline-block;
                content: '';
                border-left: 12px solid #2599f2;
                border-top: 10px solid transparent!important;
                border-bottom: 10px solid transparent!important;
                border-right: 0;
            }
        }
        &.on {
            position: relative;
            &:before {
                position: absolute;
                top: 50%;
                left: 35%;
                height: 15px;
                transform: translate(0%, -50%);
                display: inline-block;
                content: '';
                border-radius: 2px;
                border-left: 2px solid #2599f2;
                border-top: 0;
                border-bottom: 0;
                border-right: 0;
            }
            &:after {
                position: absolute;
                top: 50%;
                left: 60%;
                height: 15px;
                transform: translate(0%, -50%);
                display: inline-block;
                content: '';
                border-radius: 2px;
                border-left: 2px solid #2599f2;
                border-top: 0;
                border-bottom: 0;
                border-right: 0;
            }
        }
    }
    .animate {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 36px;
        height: 36px;
        margin-left: 50px;
        border-radius: 100%;
        border: 2px solid #2599f2;
        transition: all .5s;
        &:after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            transform: translate(-50%, -50%);
            display: inline-block;
            content: '';
            border-radius: 2px;
            background-color: #2599f2;
        }
        &:hover {
            cursor: pointer;
            background-color: #2599f2;
            &:before {
                background-color: #fff!important;
            }
            &:after {
                background-color: #fff!important;
            }
        }
    }
}